<template>
    <el-card class="layout-query">
        <el-form :inline="true" :model="taskDetail" class="demo-form-inline">
            <el-form-item label="作业名称：">
                <el-text class="mx-1" type="primary" size="large"> {{ taskDetail.taskName }}</el-text>
            </el-form-item>
            <el-form-item label="作业得分：">
                <el-text class="mx-1" type="success" size="large">{{ taskDetail.score }} </el-text> /{{
                    taskDetail.totalScore }}
            </el-form-item>
            <el-form-item label="大模型得分：">
                <el-text class="mx-1" type="primary" size="large">{{ taskDetail.aiScore }}</el-text>
            </el-form-item>
            <el-form-item label="教师得分：">
                <el-text v-if="userId === null" class="mx-1" type="warning" size="large"> {{ taskDetail.teacherScore }}</el-text>
                <el-input v-else
                    v-model="taskDetail.teacherScore"
                    style="width: 25%"
                    placeholder="请输入你的评分"
                />
            </el-form-item>
            <el-form-item>
                <el-button v-if="userId === null"  @click="saveTask()">保存作业</el-button>
                <el-button v-else  @click="saveTask()">提交评分</el-button>
            </el-form-item>
            <el-form-item >
        <el-button v-if="userId === null" type="primary" @click="submitTask()">提交作业并测评</el-button>
            </el-form-item>
        </el-form>
    </el-card>

    <div 
    style="display: flex; 
    gap: 10px;" 
    v-for="(topic, index) in taskDetail.topicList" 
    :key="index"
    v-loading="loading"
    :element-loading-svg="svg"
    class="custom-loading-svg"
    element-loading-svg-view-box="-10, -10, 50, 50"
    >
        <!-- 题目卡片 -->
        <el-card style="flex: 3;margin-bottom: 2%;">
            <template #header>
                <span>题目 {{ topic.topicOrder }}</span>
                <span style="margin-left: 5%;">题目名称：</span>
                <el-text class="mx-1" type="primary" size="large">{{ topic.topicName }}</el-text>
                <span style="margin-left: 5%;">题目类型：</span>
                <el-select v-model="topic.topicType" clearable placeholder="请选择题目类型" style="width: 240px;" disabled >
                    <el-option v-for="item in topicTypeList" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </template>
            <!-- 根据题目类型展示不同详情 -->
            <!-- 论述题 -->
            <el-card v-if="topic.topicType === '0'">
                <el-button color="#626aef" style="display: block; width: 100%;margin-bottom: 0px;" plain
                    disabled>题目详情</el-button>
                <el-input v-model="topic.topicDetail" disabled style="display: block;"
                    :autosize="{ minRows: 2, maxRows: 500 }" type="textarea" />
                <template #footer>
                    <el-button color="#626aef" style="display: block; width: 100%;margin-bottom: 0px;" plain
                        disabled>答案详情</el-button>
                    <el-input 
                    :disabled="userId !== null"
                     v-model="topic.answerDetail" 
                     style="display: block;"
                    :autosize="{ minRows: 2, maxRows: 500 }" 
                    type="textarea" 
                    placeholder="请输入答案详情" />
                </template>
            </el-card>

            <!-- 文件题 -->
            <el-card v-if="topic.topicType === '4'">
                <el-button color="#626aef" style="display: block; width: 100%;margin-bottom: 0px;" plain
                    disabled>题目详情</el-button>
                <el-input v-model="topic.topicDetail" disabled style="display: block;"
                    :autosize="{ minRows: 2, maxRows: 500 }" type="textarea" />
                <template #footer>
                    <el-button color="#626aef" style="display: block; width: 100%;margin-bottom: 0px;" plain
                        disabled>答案上传</el-button>
                    <!-- 使用自定义文件上传组件 -->
                    <MaUploadFile v-model="topic.answerDetailFileList" />
                </template>
            </el-card>

        </el-card>
        <!-- 答案 -->
        <el-card style="flex: 2;margin-bottom: 2%;">
            <template #header>
                <span style="margin-left: 5%;">本题大模型得分：</span>
                <el-text class="mx-1" type="primary">{{ topic.aiScore || '暂无' }} / {{ topic.totalScore }}</el-text>
            </template>
            <!-- 分析 -->
            <el-button color="#626aef" style="display: block; width: 100%;margin-bottom: 0px;" plain
                disabled>得分分析</el-button>
            <el-input v-model="topic.scoreAnalyse" disabled style="display: block;"
                :autosize="{ minRows: 2, maxRows: 500 }" type="textarea" />
            <template #footer>
                <el-button color="#626aef" style="display: block; width: 100%;margin-bottom: 0px;" plain
                    disabled>学情分析</el-button>
                <el-input v-model="topic.learnAnalyse" disabled style="display: block;"
                    :autosize="{ minRows: 5, maxRows: 500 }" type="textarea" />
            </template>

        </el-card>
    </div>

</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus'
import type { SysFileUploadVO } from '@/api/sys/upload';
import {  userTaskDetail,saveTasktDetail,submitTasktDetail } from '@/api/smstu/task';
const loading = ref(false)
// 获取作业数据
const router = useRouter()
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `
const route = useRoute();
const taskId = route.query.taskId as string;
const userId = Number(route.query.userId) || null;
// const courseUserId = route.query.courseUserId as string;
// 作业详情结构体
const taskDetail = ref({
    userId: userId,
    courseUserId: '',
    taskId: taskId,
    taskName: '',
    totalScore: '0',
    score: '0',
    aiScore: '0',
    teacherScore: '0',    
    topicList: [] as Array<{
        id?: string
        topicOrder: number
        topicName: string
        topicType: string
        topicDetail: string
        totalScore:string
        sourceType: string
        topicId: string
        answerId: string 
        answerDetail: string
        answerDetailFileList: SysFileUploadVO[]
        learnAnalyse: string
        aiScore: string
        scoreAnalyse: string
    }>
})

// 题目类型列表
const topicTypeList = [
    { value: '0', label: '论述题' },
    { value: '1', label: '单选题' },
    { value: '2', label: '多选题' },
    { value: '3', label: '判断题' },
    { value: '4', label: '文件题' },
]

// 查询作业详情
const queyTaskDetail = () => {
    userTaskDetail(taskId,userId).then(res => {
        // 处理API返回数据，转换类型和处理null值
        const processedData = {
            ...res.data,
            topicList: res.data.topicList.map((topic: any) => ({
                ...topic,
                topicOrder: Number(topic.topicOrder), // 转换为数字
                answerDetailFileList: topic.answerDetailFileList || [], // 处理null
                aiScore: topic.aiScore || '0',
                totalScore: topic.totalScore || '0',
                scoreAnalyse: topic.scoreAnalyse || '暂无分析',
                learnAnalyse: topic.learnAnalyse || '暂无分析'
            }))
        }
        taskDetail.value = processedData
    })
}

// 保存作业
const saveTask = () => {
    loading.value = true
    // 添加courseUserId进去
    // taskDetail.value.courseUserId = courseUserId === '' ? '' : courseUserId
    // 添加usesrId进去
    taskDetail.value.userId = userId === null ? null : userId
    saveTasktDetail(taskDetail.value).then(res => {
        ElMessage.success(userId ? '保存成功' : '评分成功')
    }).finally(() => {
        loading.value = false
        //刷新页面
        router.go(0)
        queyTaskDetail()
    })
}
// 提交作业
const submitTask = () => {
    loading.value = true
    // 添加courseUserId进去
    // taskDetail.value.courseUserId = courseUserId === '' ? '' : courseUserId
    console.log(taskDetail.value)
    submitTasktDetail(taskDetail.value).then(res => {
            ElMessage.success('提交成功')
    }).finally(() => {
        loading.value = false
        // 刷新页面
        // router.go(0)
        queyTaskDetail()
    })
}
onMounted(() => {
    queyTaskDetail()
    console.log(taskDetail.value)
})
</script>